<template>
	<view>
		<!-- 赠送贝壳 -->
		<!-- 赠送贝壳开始 -->
		<uni-popup ref="shell" type="center" :isMaskClick="false">
			<view>
				<view :style="user?'height:1040rpx;':'height:900rpx'"
					style="position: relative;;width: 636rpx;background:#8BBFFD url(../../static/erqi/send-bg.png) left bottom / 100% 100% no-repeat;border-radius: 16rpx;">
					<view style="" class="pr">
						<view class="center color-ffffff fs-34 pr bold pr" style="padding-top: 14rpx;z-index: 3;">赠送贝壳
						</view>
						<image src="../../static/erqi/send-bg2.png"
							style="position: absolute;z-index: 1;width: 278rpx;height: 92rpx;left: 50%;top:-14rpx;transform: translateX(-50%);"
							mode=""></image>
					</view>


					<view class="" style="width: 562rpx;margin-left: 38rpx;margin-top: 70rpx;">
						<!-- 名片 -->
						<view style="padding:24rpx 27rpx 24rpx 27rpx;background-color: #FFFBF4;border-radius: 16rpx;">

							<view class="flex flex-y-center color-333333 fs-28">
								<view>赠送给</view>
								<input :maxlength="11" @input="mobile_input" type="number" placeholder="请输入被赠送方号码"
									class="fs-28 color-333333 flex-1" style="text-align: right;" v-model="mobile">

							</view>

							<view v-if="user" class="gave-user flex flex-y-center" style="padding-right: 28rpx;">
								<image :src="user.avatarUrl" mode="aspectFill"
									style="width: 84rpx;height: 84rpx;border-radius: 50%;background-color: #FFFFFF;margin-left: 28rpx;margin-right: 28rpx;">
								</image>
								<view class="flex-1 over-line1">
									<view class="over-line1 fs-30 color-333333">{{user.name}}</view>
									<view class="over-line1 fs-24 color-333333"
										style="margin-top: 2rpx;color: #9D907E;">{{user.teamLevelStr}} </view>
								</view>
							</view>

							<view></view>

						</view>

						<view style="text-align: left;margin-top: 26rpx;">

							<view class="flex flex-1 flex-y-center color-333333 fs-28">
								<input type="number" placeholder="请输入赠送数量" class="fs-28 color-333333 flex-1"
									style="text-align: left;height: 80rpx;" v-model="number">

							</view>

							<view class="" style="height: 0.5px;background-color: #D8D8D8;margin-top: 26rpx;"></view>

						</view>

						<view style="text-align: left;margin-top: 26rpx;">

							<view class="flex flex-1 flex-y-center color-333333 fs-28">
								<input type="text" placeholder="请输入图片验证码" class="fs-28 color-333333 flex-1"
									style="text-align: left;height: 80rpx;" v-model="imgcode">
								<image @tap="get_code" :src="img"
									style="width: 200rpx;height: 80rpx;border-radius: 8rpx;" mode="">
								</image>
							</view>

							<view class="" style="height: 0.5px;background-color: #D8D8D8;margin-top: 26rpx;"></view>

						</view>

						<view style="text-align: left;margin-top: 26rpx;">

							<view class="flex flex-1 flex-y-center color-333333 fs-28">
								<input type="number" placeholder="请输入手机验证码" class="fs-28 color-333333 flex-1"
									style="text-align: left;height: 80rpx;" v-model="code">
								<view class="send-verify" @tap="sendRegistCode">{{time}}</view>
							</view>

							<view class="" style="height: 0.5px;background-color: #D8D8D8;margin-top: 26rpx;"></view>

						</view>

						<!-- 名片 -->
						<view @tap="send_beike" class="send-btn" :style="get_hui()?'':'opacity:0.5;'">确定赠送</view>
						<view v-if="shouxufei>0" class="flex flex-x-center color-999999 fs-24 mt-40"
							style="color: #FFFFFF;">
							温馨提示：每赠送收取{{shouxufei}}%的手续费
						</view>
					</view>

				</view>

				<view class="flex flex-x-center" style="margin-top: 30rpx;">
					<text @tap="close" class="iconfont icon-guanbi1 color-ffffff fs-50"
						style="font-size: 56rpx;"></text>
				</view>

			</view>
		</uni-popup>
		<!-- 赠送贝壳结束 -->
	</view>
</template>

<script>
	export default {
		name: "send",
		data() {
			return {
				mobile: '',
				user: null,
				code: '',
				img: "", //验证码图片
				uuid: '',
				imgcode: '',
				time: '发送验证码',
				number: '',
				currentTime: 60,
				shouxufei: '0',
			};
		},
		mounted() {
			this.get_money();
		},
		methods: {
			get_money() {
				this.request({
					url: '/common/TRANSFER_ACCOUNTS'
				}).then(res => {
					if (res.status == 200 && res.data) {
						this.shouxufei = this.xs((Number(res.data) * 100), 2);
					}
				});
			},
			get_hui() {
				if (this.mobile.length != 11 || this.code.length == 0 || this.number <= 0) {
					return false;
				}
				return true;
			},
			open() {
				this.$refs.shell.open();
				this.get_code();
			},
			close() {
				this.$refs.shell.close();
			},
			get_code() {
				this.request({
					url: '/wechatLogin/code',

				}).then(res => {
					if (res.status == 200 && res.img) {
						this.$nextTick(() => {
							this.img = res.img;
							this.uuid = res.uuid;
							this.imgcode = '';
						})
					}
				});
			},
			sendRegistCode(e) {

				if (this.imgcode == '') {
					this.showToast('请输入图片验证码');
					return;
				}

				if (this.time != '发送验证码') {
					this.showToast('请稍等');
					return;
				}

				this.less(() => {


					let that = this;

					let interval;
					this.request({
						url: '/wechatLogin/getCodeByToken',
						data: {
							phone: this.user_info.phone,
							uuid: this.uuid,
							code: this.imgcode
						},
						loading: true,
					}).then(res => {
						if (res.status == 200) {
							this.showToast('验证码已发送', 3000);
							that.time = that.currentTime + 's后重新获取';
							that.disabled = true;
							interval = setInterval(function() {
								that.time = that.currentTime - 1 + 's后重新获取';
								that.currentTime--;
								if (that.currentTime <= 0) {
									clearInterval(interval)
									that.time = '发送验证码',
										that.currentTime = 60,
										that.disabled = false
								}
							}, 1000)
						} else {
							this.get_code();
						}
					})



				})

			},
			mobile_input() {
				if (String(this.mobile).length == 11) {
					this.get_user();
				} else {
					this.user = null;
				}
			},
			get_user() {

				this.request({
					url: '/wjuser/user/getUserForPhone',
					data: {
						phone: this.mobile,
					}
				}).then(res => {
					if (res.status == 200) {
						this.user = res.data;
						return;
					}
					this.user = null;
				});
			},
			send_beike() {
				if (this.mobile.length != 11) {
					this.showToast('请输入被赠送方手机号');
					return false;
				}


				if (this.number <= 0) {
					this.showToast('请输入贝壳数量');
					return false;
				}
				if (this.code.length == 0) {
					this.showToast('请输入手机验证码');
					return false;
				}
				if (!this.user) {
					return;
				}

				this.less(() => {
					this.request({
						url: '/wjuser/user/meByYou',
						data: {
							code: this.code,
							id: this.user.id,
							money: this.number
						},
						method: 'POST',
						loading: true,

					}).then(res => {
						if (res.status == 200) {
							this.showToast('赠送成功');
							this.mobile = '';
							this.number = '';
							this.user = null;
							this.$emit('update');
							this.close();
						}
					});
				});

			},
		}
	}
</script>

<style lang="scss">
	.gave-user {
		height: 140rpx;

		height: 140rpx;
		background: #EEECF4;
		border: 2rpx solid #586EFB;
		border-radius: 14rpx;
		margin-top: 30rpx;
		margin-bottom: 18rpx;
		text-align: left;
	}

	.send-verify {
		font-size: 26rpx;
		color: #3B52E7;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		background: #FFFFFF;
	}

	.send-btn {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background: #3B52E7;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
		border-radius: 44rpx;
		margin-top: 30rpx;
		font-size: 36rpx
	}
</style>
